<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ryu Selector2</title>
<script src="../lib/jquery-2.1.1.js"></script>

<script>
$(document).ready(function(){
	// label 태그중에 abc 속성이 있는 모든 element선택
	$('label[abc]').css('color', '#ff0000');

	$('label[abc=aba]').css('font-size', '40px');
	$('label[abc=ab]').css({
		'font-': 'bolder',
		'color' : '#0000ff'
	});
	
	// input 태그중에 속성의 유형이 name 이고 값이 hobby 인 element 선택
	$('input[type=checkbox]').css('color', 'red');
});
</script>

</head>
<body>
<h3>Attribute 를 사용한 Selector Example</h3><hr/>
	<div>
		<label abc="a"><input type="checkbox" name="hobby">독서</label>
		<label abc="ab"><input type="checkbox" name="hobby">라이딩</label>
		<label abc="abc"><input type="checkbox" name="hoo">웹서핑</label>
		<label abc="a"><input type="checkbox" name="hoo">구리구리</label>
		<label ab="ab"><input type="checkbox" name="hobby">동동</label>
		<input type="checkbox" name="hoo">동동
		<input type="checkbox" name="hoo">동동
		<input type="checkbox" name="hoo">동동
	</div>

</body>
</html>